<template>
    <div class="iphone">
        <main>
            <div v-for="(item,index) in items" :key="index" class="item">
                <product-card :data="item"/>
            </div>
        </main>
        
        <div class="content">
            <img 
                v-for="(item,index) in imgs" 
                :key="index" 
                :src="item" 
            >
        </div>
    </div>
</template>
<script>
import ProductCard from '../components/productCard.vue'
export default{
    components:{
        ProductCard
    },
    data(){
        return{
            items:[
               {
                    name:'Apple iPhone 12 Pro',
                    price:'￥8499.00',
                    src:'https://img14.360buyimg.com/n0/jfs/t1/126823/36/14820/43442/5f86141aE9b1c0424/5b226412092ef7bc.jpg'
                },
                {
                    name:'Apple iPhone 12',
                    price:'￥6898.00',
                    src:'https://img14.360buyimg.com/n0/jfs/t1/161431/34/6440/40857/6023bc8aE934a06ef/0e2cc0a4df83ccc3.jpg'
                },
                {
                    name:'Apple iPhone 12 Pro Max',
                    price:'￥9299.00',
                    src:'https://img14.360buyimg.com/n0/jfs/t1/138694/17/10615/68848/5f861345E105290e8/27a4a550d6b41eee.jpg'
                },
                {
                    name:'Apple iPhone SE',
                    price:'￥3299.00',
                    src:'https://img14.360buyimg.com/n0/jfs/t1/106471/6/18700/159677/5e97393cE2d418cc7/3ae010aa64cc187e.jpg'
                }
            ],
            imgs:[
                'https://img14.360buyimg.com/n0/jfs/t1/143347/40/10787/64744/5f861613Ee12ecd61/e4a1c3bd3e3b1738.jpg',
                'https://img14.360buyimg.com/n0/jfs/t1/138236/21/10852/85245/5f86161aE066fdb89/0bb35069722e887c.jpg',
                'https://img14.360buyimg.com/n0/jfs/t1/116014/18/20028/88752/5f861617E3442110b/c133448e8c133c91.jpg'
            ]
        }
    },
}
</script>
<style scoped>
.iphone main{
    display: flex;
    margin-top: 1em;
}
.iphone main>div+div{
    margin-left: 1em;
}
.iphone .content{
    margin-top: 1em;
}
</style>
        